<template>
    <div class="common onePlusSign">
        <innerCommon :location="location">
            <template slot="left">
                <span>审核列表</span>
                <a-input-search class="inputStyle" placeholder="请输入用户名"  v-model="searchValue" enter-button @search="onSearch" />
            </template>
            <template slot="right">
                <download 
                     v-if='searchInfo.status==1&&list.length>0'
                    :name="'导出'" 
                    :api="'manage/onePlusXTraining/exportTrainerApply'"
                    :fileName="'已审核人员列表.xls'"
                    methods="post"
                    :formData="{'trainingId':searchInfo.trainingId}"
                    style="margin-right:10px;"
                ></download>
                <a-button type="primary" @click="returnBack()">返回</a-button>
            </template>
            <div slot="table">
                <topList
                    :topList="topList"
                    :currentItem="searchInfo.status"
                    @changeTop="changeTop"
                ></topList>
                <a-table 
                    size="middle"
                    :columns="columns" 
                    :data-source="list" 
                    :pagination="pagination"
                    :rowKey="record=>record.id"
                    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                    :locale="{'emptyText': '暂无数据'}"
                    bordered>
                    <div slot="status" slot-scope="index,record"> 
                        <span v-if="record.status==0" style="color:orange">待审核</span>
                        <span v-else-if="record.status==1" style="color:green">已通过</span>
                        <span v-else style="color:red">未通过</span>
                    </div>
                    <div slot="action" slot-scope="index,record" class="tableAction">
                        <span v-if="record.status!=1" @click="isPass(1,record.id)">通过</span>
                        <span v-if="record.status!=2" @click="isPass(2,record.id)">不通过</span>
                        <span @click="openDownloadModal(record)" v-if="record.attachFile">查看</span>
                        <confirmBox
                            @handleOk="deletePeople(record.id)"
                            :typeName="'删除'"
                            :noticeInfo="record.name"
                            :noticeType="''"
                        ></confirmBox>
                    </div>
                </a-table>
                <a-button type="primary" v-if="selectedRowKeys.length>0" @click="downloadLot()" style="position:relative;top:-40px;">批量下载</a-button>
            </div>
        </innerCommon>

        <!-- 下载弹框 -->
        <a-modal
            title="查看"
            :visible="downloadModal"
            @cancel="downloadModal=false"
            okText="确认"
            cancelText='取消'
            class="downloadListModal"
            :footer="null"
            >
            <ul>
                <li v-for="(item,index) in downloadList" :key="index">
                    <span><a-icon type="file" /> {{item.filename}}</span>
                    <span @click="preview(item.preview)" v-if="item.preview">预览</span>
                    <span  @click="downloadFile(item)"><a-icon type="download" /></span>
                </li>
            </ul>
        </a-modal>
    </div>
</template>
<script>
import innerCommon from "@/components/common/innerCommon"
import topList from "@/components/common/topList"
import confirmBox from "@/components/common/confirmBox"
import download from "@/components/common/download"
import axios from "axios"
import {
    getTrainingPeopleListApi,
    updateTrainingPeopleStatusApi,
    deleteTrainerApplyApi,
    downloadZipApi,
    removeDownloadZipApi
} from "@/request/api"
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '用户名',
        dataIndex: 'name',
    },{
        title: '账号',
        dataIndex: 'account',
    },{
        title: '真实姓名',
        dataIndex: 'realname',
    },{
        title: '所在单位',
        dataIndex: 'instituteName',
    },{
        title: '身份证号码',
        dataIndex: 'idCardNum',
    },{
        title: '联系方式',
        dataIndex: 'telephone',
    },{
        title: '审核时间',
        dataIndex: 'pubTime'
    },{
        title: '审核人',
        dataIndex: 'publisher'
    },{
        title: '审核状态',
        scopedSlots: { customRender: 'status' },
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
    }
]
export default {
    name:"viewOnePlusSign",
    components:{innerCommon,topList,confirmBox,download},
    watch:{
        searchValue:function(val){
            this.searchValue=val.trim()
        }
    },
    created(){
        this.searchInfo.trainingId=this.$route.query.trainingId
        this.location=[
            {name:'1+X管理',path:''},{name:'培训管理',path:'/onePlusTrainingManage'},{name:'审核列表',path:''}
        ]
        this.init()
    },
    data(){
        return{
            columns,
            location:[],
            searchValue:'',
            topList:[
                {
                    name:"已审核人员",
                    id:1
                },{
                    name:'待审核人员',
                    id:0
                }
            ],
            list:[],
            pagination:{total:0,pageSize:10,current:1},
            searchInfo:{
                trainingId:'',
                status:1,
                keyword:''
            },
            downloadModal:false,
            downloadList:[],
            selectedRowKeys:[],
            apiUrl:window.g.apiUrl,
        }
    },
    methods:{
        init(){
            this.getToken(getTrainingPeopleListApi,this.searchInfo,res=>{
                this.list=res.data.rows.map((item,index)=>({
                    ...item.creator,
                    'publisher':item.publisher&&item.publisher.name,
                    ...item,
                    index:index+1
                }))
                this.pagination.total=res.data.count
            })
        },
        returnBack(){
            this.$router.go(-1)
        },
        onSearch(data){
            this.searchInfo.keyword=data
            this.init()
        },
        changeTop(data){
            this.searchInfo.status=data
            if(data==0){
                this.columns[7]={
                    title: '审核时间',
                    dataIndex: 'pubTime'
                }
            }else{
                this.columns[7]={
                    title: '申请时间',
                    dataIndex: 'createTime'
                }
            }
            this.init()
        },
        changePage(data){
            this.searchInfo.page=data.current
            this.pagination.current=data.current
            this.init()
        },
        // 删除
        deletePeople(id){
            this.getToken(deleteTrainerApplyApi,{'applyId':id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        isPass(type,id){
            this.getToken(updateTrainingPeopleStatusApi,{'applyId':id,'status':type},data=>{
                this.$message.success(data.message)
                this.init()
            })
        },
        openDownloadModal(data){
            this.downloadModal=true
            this.downloadList=data.attachFile
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;

        },
        // 批量下载
        downloadLot(){
            if(this.selectedRowKeys.length>0){
                this.getToken(downloadZipApi,{
                    'applyIdArr':this.selectedRowKeys
                },res=>{
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = res.data;
                    link.setAttribute('download', '')
                    document.body.appendChild(link)
                    link.click()
                    this.selectedRowKeys=[]
                    this.getToken(removeDownloadZipApi,{'filepath':res.data})
                })
            }else{
                this.$message.error('请选择有附件的申请用户！')
            }
        },
        downloadFile(item){
            axios({
                url: this.apiUrl+'manage/onePlusXTraining/downloadSingleAttachFile',
                data:{'attachFile':item.path},
                method: 'post',
                responseType: 'blob'
            }).then(res=>{
                let url = window.URL.createObjectURL(res.data)
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url;
                link.setAttribute('download', item.filename)
                document.body.appendChild(link)
                link.click()
                this.$message.success('下载成功')
                this.selectedRowKeys=[]
            })
        },
        // 预览
        preview(data){
            window.open(data)
        }
    }
}
</script>
<style lang="stylus">
.viewSign{
    .innerCommon{
        .content{
            margin-top:76px;
            position:relative;
        }
    }
    .tableWrapUl{
        position:absolute;
        top:-60px;
        left:0;
    }
}
.downloadListModal
    ul
        list-style:none;
        padding:0 30px;
        li
            display:flex;
            justify-content space-between;
            line-height:30px;
            cursor:pointer;
            span
                &:nth-child(1)
                    width:300px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
            &:hover
                color:#1890ff;
                    
                    

</style>